<!--
/**
* @name MonitorInfo
* @description 监控信息
* @author wind-lc
* @date 2020-06-10
* @param {**} ** **
* @example <monitor-info></monitor-info>
*/
-->
<template>
  <div class="data-monitor-info"
       :class="{'data-monitor-info-min':!infoVisible}">
    <div class="data-monitor-info-visible"
         @click="infoVisible = !infoVisible">
      <icon-svg type="icon-zuozuo-"></icon-svg>
    </div>
    <ul class="data-monitor-info-list">
      <!-- 企业 -->
      <li class="data-monitor-info-item">
        <h5 class="data-monitor-info-item-title">
          <icon-svg type="icon-qiye"></icon-svg>
          <span>企业</span>
        </h5>
        <ul class="data-monitor-info-num">
          <li>
            <b>20</b>
            <span>在产企业数(家)</span>
          </li>
          <li>
            <b>30</b>
            <span>停产企业数(家)</span>
          </li>
        </ul>
      </li>
      <!-- 企业 -->
      <!-- 设备 -->
      <li class="data-monitor-info-item">
        <h5 class="data-monitor-info-item-title">
          <icon-svg type="icon-ziyuanxhdpi"></icon-svg>
          <span>设备</span>
        </h5>
        <ul class="data-monitor-info-num">
          <li class="data-monitor-info-num-max">
            <b>30000</b>
            <span>设备总数</span>
          </li>
          <li>
            <b>20</b>
            <span>产污设备数(个)</span>
          </li>
          <li>
            <b>30</b>
            <span>治污设备数(个)</span>
          </li>
          <li>
            <b>20</b>
            <span>设备在线数(个)</span>
          </li>
          <li>
            <b>30</b>
            <span>设备离线数(个)</span>
          </li>
        </ul>
        <div class="data-monitor-info-item-line"></div>
        <!-- 异常 -->
        <div class="data-monitor-info-abnormal-title">
          <icon-svg type="icon-yichangshijianliebiaocopy"></icon-svg>
          <span>异常(条)</span>
        </div>
        <ul class="data-monitor-info-abnormal-list">
          <li>
            <span>设备异常</span>
            <b>80</b>
          </li>
          <li>
            <span>企业异常</span>
            <b>90</b>
          </li>
        </ul>
        <!-- 异常 -->
      </li>
      <!-- 设备 -->
      <!-- 重点企业列表 -->
      <li class="data-monitor-info-item data-monitor-info-item-emphasis">
        <h5 class="data-monitor-info-item-title">
          <icon-svg type="icon-shoucang"></icon-svg>
          <span>重点企业列表</span>
        </h5>
        <ul class="data-monitor-info-emphasis-list">
          <li>成都市龙泉松福页岩砖厂</li>
          <li>成都市三兴页岩砖厂</li>
          <li>中植一客成都汽车有限公司</li>
          <li>立邦涂料(成都)有限公司</li>
          <li>成都市九天家私有限公司</li>
          <li>成都南玻玻璃有限公司</li>
          <li>台玻成都玻璃有限公司</li>
          <li>崇州市永富页岩砖厂</li>
          <li>明达玻璃(成都)有限公司</li>
          <li>成都皇朝逸家家具有限公司</li>
          <li>都江堰拉法基水泥有限公司</li>
          <li>彭州市利民新型墙体材料有限责任公司</li>
          <li>都江堰柯世达汽车配件有限公司</li>
        </ul>
      </li>
      <!-- 重点企业列表 -->
    </ul>
  </div>
</template>
<script>
import IconSvg from '@/components/IconSvg'
export default {
  name: 'MonitorInfo',
  components: {
    IconSvg
  },
  data () {
    return {
      // 显示隐藏信息栏
      infoVisible: true
    }
  },
  methods: {

  }
}
</script>
<style lang="scss">
.data-monitor-info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 300px;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 2;
  transition: left ease 0.4s;
  padding: 10px;
}
.data-monitor-info-min {
  left: -300px;
  .data-monitor-info-visible .icon-svg {
    transform: rotate(180deg);
  }
}
.data-monitor-info-visible {
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -60px;
  width: 30px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0 60px 60px 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  .icon-svg {
    font-size: 16px;
    color: #666666;
    margin-left: 2px;
  }
}
.data-monitor-info-list {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.data-monitor-info-item {
  margin: 10px;
  background-color: #ffffff;
  width: 260px;
  padding: 10px;
}
.data-monitor-info-item-title {
  padding: 10px;
  display: flex;
  align-items: center;
  .icon-svg {
    color: #4177ed;
    font-size: 16px;
  }
  span {
    color: #333333;
    font-size: 16px;
    margin-left: 5px;
  }
}
.data-monitor-info-num {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 50%;
    padding: 6px 10px;
    b {
      font-size: 18px;
      color: #333333;
      display: block;
      margin-bottom: 12px;
    }
    span {
      font-size: 14px;
      color: #666666;
    }
  }
  .data-monitor-info-num-max {
    width: 100%;
  }
}
.data-monitor-info-item-line {
  width: 100%;
  height: 1px;
  background-color: #e8e8e8;
  margin: 6px 0;
}
.data-monitor-info-abnormal-title {
  padding: 10px;
  display: flex;
  align-items: center;
  .icon-svg {
    color: #000000;
    font-size: 14px;
  }
  span {
    font-size: 14px;
    color: #333333;
    margin-left: 5px;
  }
}
.data-monitor-info-abnormal-list {
  li {
    padding: 8px;
    display: flex;
    justify-content: space-between;
    span {
      font-size: 14px;
      color: #666666;
    }
    b {
      font-size: 14px;
      color: #333333;
    }
  }
}
.data-monitor-info-emphasis-list {
  height: calc(100% - 36px);
  overflow-x: hidden;
  overflow-y: auto;
  li {
    padding: 8px;
    font-size: 14px;
    color: #666666;
  }
}
.data-monitor-info-item-emphasis {
  height: calc(100% - 503px);
}
</style>
